<template>
	<view>
		<view class="user-card">
			<image v-if="userInfo.patHeadImg" class="avatar" :src="hostApi+userInfo.patHeadImg" />
			<view v-else>
				<image class="avatar" v-if="sex.includes('男')" :src="avatarMan" />
				<image class="avatar" v-else :src="avatarWoman" />
			</view>
			<view class="user-info">
				<view class="user-name">{{ userInfo.patName }}</view>
				<view class="user-id">就诊卡: {{ userInfo.patId }}</view>
			</view>
			<view class="switch-user" @click="toCardListPage">
				<!-- <image class="switch-icon" src="/static/images/icon/switchUser-icon.png" /> -->
				<!-- 切换就诊人 -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		listSex
	} from '../../utils/listSex';
	export default {
		props: {
			change: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			...mapGetters(['userInfo', "hostApi"]),
		},
		data() {
			return {
				avatarMan: '/static/images/patient/user-avatar-man.jpg',
				avatarWoman: '/static/images/patient/user-avatar.jpg',
				sex: '',
			}
		},
		mounted() {
			this.setSex();
		},
		methods: {
			toCardListPage() {
				if (!this.change) {
					this.$u.toast('当前页面无法切换就诊人')
					return
				}
				uni.navigateTo({
					url: '/pages/Login/patientCardList'
				})
			},
			setSex() {
				listSex.forEach(item => {
					if (this.userInfo.patSex == item.value) {
						this.sex = item.label;
						return;
					}
				})
			},
		}
	}
</script>

<style scoped>
	.register-payment-page {
		background: linear-gradient(#e0f3ff 0%, #fff 30%);
		min-height: 100vh;
		padding: 30rpx 20rpx 40rpx;
		position: relative;
	}

	.user-card {
		display: flex;
		align-items: center;
		/* background: linear-gradient(90deg, #F0FEFF 0%, #b6e0f7 85%, #F0FEFF 100%); */
		background-image: url("/static/images/imgs/userinfo-card.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		border-radius: 16rpx 16rpx 0 0;
		padding: 32rpx 40rpx 24rpx;
		position: relative;
	}

	.avatar {
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.user-info {
		flex: 1;
		margin-bottom: 10rpx;
	}

	.user-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
	}

	.user-id {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
	}

	.switch-user {
		/* display: flex; */
		/* flex-direction: column; */
		/* align-items: center; */
		/* margin-top: 6rpx; */
		/* color: #1ec6e6; */
		/* font-size: 24rpx; */
		/* 		background-color: white;
		border-radius: 16rpx;
		padding: 10px; */
		background-image: url("/static/images/imgs/change-patient.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 70px;
		height: 24px;
	}

	.change-pat {
		width: 60px;
		height: 15px;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 12px;
		color: #2E6D78;
		line-height: 15px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.switch-icon {
		width: 24px;
		height: 24px;
		margin-right: 8rpx;
	}
</style>